<template>
	<view class="con">
		<view class="uni-margin-wrap">
			<swiper class="swiper"circular indicator-dots="true" >
				<swiper-item v-for="(item,index) in goodsList" >
					<view class="swiper-item goods">
						<view class="goodsli" v-for="(v,i) in item" >
							<view class="goodsImg" @click="jump(v.id,v.product_name)">
								<image :src="v.preview_img" mode="aspectFit"></image>
								<view class="conmtypelitexts " v-if="v.product_bank_price">返现金额:{{v.product_bank_price}}</view>
							</view>
							<view class="goodstext" @click="jump(v.id,v.product_name)">{{v.product_name}}</view>
							<view class="goodsprice">
								<view class="goodspricetext">
									￥{{v.product_shop_price}}
								</view>
								
							</view>
						</view>
						
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item goods">B</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item goods">C</view>
				</swiper-item> -->
			</swiper>
		</view>
		
		
	</view>
	
</template>

<script>
	import{getXgjRecommendGoods} from '@/api/goodsList.js'
	export default {
		name: "sheetRecommendlb",
		data() {
			return {
				goodsList:[],
				zanwu:false,
			}
		},
		onShow() {
		
		},
		
		methods: {
			getRecommendlistlb(){
				getXgjRecommendGoods({}).then(res=>{
					this.goodsList = res.result;
				}).catch(err=>{
					
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				})
			},
			jump(id,title){
				uni.navigateTo({
					url: '/package/info/index?id='+ id +'&title='+title
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.swiper{
		min-height: 380px;
		// max-height: 600px;
		padding: 10px 0;
	}
	.goods{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.goodsli{
			width: 31%;
			margin: 0 1%;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 8px;
			    overflow: hidden;
			.goodsImg{
				width: 100%;
				height: 200rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				position: relative;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
				.conmtypelitexts{
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
					color: #fff;
					font-size: 24rpx;
					background: #000000c7;
					position: absolute;
					left: 0;
					bottom: 0;
					text-align: center;
				}
			}
			.goodstext{
				width: 95%;
				height: 40px;
				overflow: hidden;
				margin: 10rpx auto;
				color: #333;
				font-size: 28rpx;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.goodsprice{
				width: 90%;
				margin: 0 auto;
				color: red;
				font-size: 28rpx;
				text-align: center;
				padding-bottom: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			} 
		}
		
	}
</style>